使用 React 可以在 JSX 中添加 事件处理函数。其中事件处理函数为自定义函数，它将在响应交互（如点击、悬停、表单输入框获得焦点等）时触发。

如需添加一个事件处理函数，你需要先定义一个函数，然后 将其作为 prop 传入 合适的 JSX 标签。例如，这里有一个没绑定任何事件的按钮：

按照如下三个步骤，即可让它在用户点击时显示消息：

你可以定义 handleClick 函数然后 将其作为 prop 传入 。其中 handleClick 是一个 事件处理函数 。事件处理函数有如下特点:

按照惯例，通常将事件处理程序命名为 handle，后接事件名。你会经常看到 onClick={handleClick}，onMouseEnter={handleMouseEnter} 等。

或者，你也可以在 JSX 中定义一个内联的事件处理函数：

或者，直接使用更为简洁箭头函数：

以上所有方式都是等效的。当函数体较短时，内联事件处理函数会很方便。

传递给事件处理函数的函数应直接传递，而非调用。例如：

区别很微妙。在第一个示例中，handleClick 函数作为 onClick 事件处理函数传递。这会让 React 记住它，并且只在用户点击按钮时调用你的函数。

在第二个示例中，handleClick() 中最后的 () 会在 渲染 过程中 立即 触发函数，即使没有任何点击。这是因为在 JSX { 和 } 之间的 JavaScript 会立即执行。

当你编写内联代码时，同样的陷阱可能会以不同的方式出现：

如果按如下方式传递内联代码，并不会在点击时触发，而是会在每次组件渲染时触发：

如果你想要定义内联事件处理函数，请将其包装在匿名函数中，如下所示：

这里创建了一个稍后调用的函数，而不会在每次渲染时执行其内部代码。

在这两种情况下，你都应该传递一个函数：

了解更多箭头函数的信息。

由于事件处理函数声明于组件内部，因此它们可以直接访问组件的 props。示例中的按钮，当点击时会弹出带有 message prop 的 alert：

此处有两个按钮，会展示不同的消息。你可以尝试更改传递给它们的消息。

通常，我们会在父组件中定义子组件的事件处理函数。比如：置于不同位置的 Button 组件，可能最终执行的功能也不同 —— 也许是播放电影，也许是上传图片。

为此，将组件从父组件接收的 prop 作为事件处理函数传递，如下所示：

示例中，Toolbar 组件渲染了一个 PlayButton 组件和 UploadButton 组件：

最后，你的 Button 组件接收一个名为 onClick 的 prop。它直接将这个 prop 以 onClick={onClick} 方式传递给浏览器内置的 。当点击按钮时，React 会调用传入的函数。

如果你遵循某个 设计系统 时，按钮之类的组件通常会包含样式，但不会指定行为。而 PlayButton 和 UploadButton 之类的组件则会向下传递事件处理函数。

内置组件（ 和 ）仅支持 浏览器事件名称，例如 onClick。但是，当你构建自己的组件时，你可以按你个人喜好命名事件处理函数的 prop。

按照惯例，事件处理函数 props 应该以 on 开头，后跟一个大写字母。

例如，Button 组件的 onClick prop 本来也可以被命名为 onSmash：

上述示例中， 代表浏览器内置的 （小写）仍然需要使用 onClick prop，而自定义的 Button 组件接收到的 prop 名称可由你决定！

当你的组件支持多种交互时，你可以根据不同的应用程序命名事件处理函数 prop。例如，一个 Toolbar 组件接收 onPlayMovie 和 onUploadImage 两个事件处理函数：

请注意，App 组件并不需要知道 Toolbar 将会对 onPlayMovie 和 onUploadImage 做 什么 。上述示例是 Toolbar 的实现细节。其中，Toolbar 将它们作为 onClick 处理函数传递给了 Button 组件，其实还可以通过键盘快捷键来触发它们。根据应用程序特定的交互方式（如 onPlayMovie）来命名 prop ，可以让你灵活地更改以后使用它们的方式。

事件处理函数还将捕获任何来自子组件的事件。通常，我们会说事件会沿着树向上“冒泡”或“传播”：它从事件发生的地方开始，然后沿着树向上传播。

下面这个 包含两个按钮。 和 每个按钮都有自己的 onClick 处理函数。你认为点击按钮时会触发哪些处理函数？

如果你点击任一按钮，它自身的 onClick 将首先执行，然后父级 的 onClick 会接着执行。因此会出现两条消息。如果你点击 toolbar 本身，将只有父级 的 onClick 会执行。

在 React 中所有事件都会传播，除了 onScroll，它仅适用于你附加到的 JSX 标签。

事件处理函数接收一个 事件对象 作为唯一的参数。按照惯例，它通常被称为 e ，代表 “event”（事件）。你可以使用此对象来读取有关事件的信息。

这个事件对象还允许你阻止传播。如果你想阻止一个事件到达父组件，你需要像下面 Button 组件那样调用 e.stopPropagation() ：

当你点击按钮时：

由于调用了 e.stopPropagation()，点击按钮现在将只显示一个 alert（来自 ），而并非两个（分别来自 和父级 toolbar ）。点击按钮与点击周围的 toolbar 不同，因此阻止传播对这个 UI 是有意义的。

极少数情况下，你可能需要捕获子元素上的所有事件，即便它们阻止了传播。例如，你可能想对每次点击进行埋点记录，传播逻辑暂且不论。那么你可以通过在事件名称末尾添加 Capture 来实现这一点：

每个事件分三个阶段传播：

捕获事件对于路由或数据分析之类的代码很有用，但你可能不会在应用程序代码中使用它们。

注意，此处的点击事件处理函数先执行了一行代码，然后调用了父组件传递的 onClick prop：

你也可以在调用父元素 onClick 函数之前，向这个处理函数添加更多代码。此模式是事件传播的另一种 替代方案 。它让子组件处理事件，同时也让父组件指定一些额外的行为。与事件传播不同，它并非自动。但使用这种模式的好处是你可以清楚地追踪因某个事件的触发而执行的整条代码链。

如果你依赖于事件传播，而且很难追踪哪些处理程序在执行，及其执行的原因，可以尝试这种方法。

某些浏览器事件具有与事件相关联的默认行为。例如，点击 表单内部的按钮会触发表单提交事件，默认情况下将重新加载整个页面：

你可以调用事件对象中的 e.preventDefault() 来阻止这种情况发生：

不要混淆 e.stopPropagation() 和 e.preventDefault()。它们都很有用，但二者并不相关：

当然可以！事件处理函数是执行副作用的最佳位置。

与渲染函数不同，事件处理函数不需要是 纯函数，因此它是用来 更改 某些值的绝佳位置。例如，更改输入框的值以响应键入，或者更改列表以响应按钮的触发。但是，为了更改某些信息，你首先需要某种方式存储它。在 React 中，这是通过 state（组件的记忆） 来完成的。你将在下一章节了解所有相关信息。

点击此按钮理论上应该在黑白主题之间切换页面背景。然而，当你点击它时，什么也没有发生。解决这个问题。（无需担心 handleClick 的内部逻辑。）